<template>
	<a-modal v-model:visible="visible" :title="modalStatus ? '编辑内容' : '新增内容'" @ok="handleOk" @cancel="handleCancel"
		okText="保存" cancelText="取消">
		<a-form :model="formItemInfo">
			<a-form-item label="名称">
				<a-input v-model:value="formItemInfo.title" />
			</a-form-item>
			<a-form-item label="状态">
				<a-select v-model:value="formItemInfo.status">
					<a-select-option :value="1">进行中</a-select-option>
					<a-select-option :value="2">已完成</a-select-option>
					<a-select-option :value="3">异常</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="产品 id">
				<a-input v-model:value="formItemInfo.id" :disabled="modalStatus" />
			</a-form-item>
			<a-form-item label="店铺 id">
				<a-input v-model:value="formItemInfo.shop_id" :disabled="modalStatus" />
			</a-form-item>
			<a-form-item label="上传轮播图图片">
				<a-upload name="avatar" list-type="picture-card" class="avatar-uploader">
					<img :src="formItemInfo.img" width="100" v-if="formItemInfo.img">
					<plus-outlined v-else></plus-outlined>
				</a-upload>
			</a-form-item>
		</a-form>
	</a-modal>
</template>

<script>
import { defineComponent, ref } from "vue";
import { message } from "ant-design-vue";
import { addSwiper, updateSwiper } from '../../service/api/swiper';

const useHttpRequestEffect = () => {
	const addSwiperRequest = async (data) => {
		const res = await addSwiper(data);
		if (res?.data?.res) {
			message.success("添加成功")
		} else {
			message.error("添加失败")
		}
	}
	const updateSwiperRequest = async (data) => {
		const res = await updateSwiper(data);
		if (res?.data?.res) {
			message.success("修改成功")
		} else {
			message.error("修改失败")
		}
	}
	return { addSwiperRequest, updateSwiperRequest }
}

export default defineComponent({
	components: {},
	props: ["dataSource"],
	setup(props) {
		const visible = ref(false);
		const formItemInfo = ref({});
		const modalStatus = ref(0); // 0新增 1编辑
		const { addSwiperRequest, updateSwiperRequest } = useHttpRequestEffect();
		const showEditModal = item => {
			formItemInfo.value = item;
			modalStatus.value = 1;
			visible.value = true;
		};
		const showAddModal = () => {
			modalStatus.value = 0;
			visible.value = true;
		};
		const handleOk = () => {
			if (modalStatus.value === 0) {
				props.dataSource.push(formItemInfo.value);
				addSwiperRequest(formItemInfo.value);
			} else if (modalStatus.value === 1) {
				updateSwiperRequest(formItemInfo.value);
			}
			visible.value = false;
			formItemInfo.value = [];
		};
		const handleCancel = () => {
			visible.value = false;
			formItemInfo.value = [];
		}
		return {
			visible, formItemInfo, modalStatus,
			showEditModal, handleOk, handleCancel,
			showAddModal
		}
	},
});
</script>

<style scoped>

</style>
